import React, { FC, useState } from 'react';

interface Props {
  menuWidth?: string;
  onPageChange?: (page: string) => void;
}

const Note: FC<Props> = ({
  menuWidth,
  onPageChange,
}) => {
  // 状态管理
  const [checkedItems, setCheckedItems] = useState({
    time: true,
    location: true,
    receptionLawyer: true,
    receptionPerson: true,
    partyName: true,
    opponentName: true,
    caseInfo: true,
    caseRisk: true,
    deadline: true,
    caseType: false,
    otherNotes: false
  });

  const [caseType, setCaseType] = useState<string>('');
  
  // 添加案由多选状态
  const [selectedCaseTypes, setSelectedCaseTypes] = useState<string[]>([]);
  
  // 添加状态来跟踪显示的输入框
  const [showInputFields, setShowInputFields] = useState<Record<string, boolean>>({
    '记录律师': false,
    '记录人': false,
    '身份证号': false,
    '身份证号-当事人': false, // 区分接待人和当事人的身份证号
    '手机号': false,
    '手机号-当事人': false, // 区分接待人和当事人的手机号
    '性别': false,
    '民族': false,
    '出生日期': false
  });
  
  // 跟踪输入框的值
  const [inputValues, setInputValues] = useState<Record<string, string>>({
    '记录律师': '',
    '记录人': '',
    '身份证号': '',
    '身份证号-当事人': '',
    '手机号': '',
    '手机号-当事人': '',
    '性别': '',
    '民族': '',
    '出生日期': ''
  });

  // 处理复选框变化
  const handleCheckboxChange = (field: string) => {
    // 检查是否是案由选择
    if (['生命权纠纷', '肖像权纠纷', '婚姻财产纠纷'].includes(field)) {
      console.log(`案由选择: ${field}`);
      setSelectedCaseTypes(prev => {
        if (prev.includes(field)) {
          return prev.filter(item => item !== field);
        } else {
          return [...prev, field];
        }
      });
    } else {
      // 普通复选框处理
      console.log(`复选框 ${field} 状态改变`);
      setCheckedItems(prev => ({
        ...prev,
        [field]: !prev[field as keyof typeof prev]
      }));
    }
  };

  // 处理单选框变化
  const handleRadioChange = (value: string) => {
    console.log(`案由选择: ${value}`);
    setCaseType(value);
  };

  // 处理添加按钮点击
  const handleAddClick = (type: string, context: string = '') => {
    console.log(`添加${type}按钮点击`);
    // 根据上下文区分相同类型的字段
    const fieldKey = context ? `${type}-${context}` : type;
    setShowInputFields(prev => ({
      ...prev,
      [fieldKey]: true
    }));
  };
  
  // 处理输入框值变化
  const handleInputChange = (type: string, value: string, context: string = '') => {
    const fieldKey = context ? `${type}-${context}` : type;
    setInputValues(prev => ({
      ...prev,
      [fieldKey]: value
    }));
  };

  // 处理取消按钮点击
  const handleCancel = () => {
    console.log('取消按钮点击');
  };

  // 处理生成笔记按钮点击
  const handleGenerateNote = () => {
    console.log('生成笔记按钮点击');
    // 直接切换到预览页面
    if (onPageChange) {
      onPageChange('draftPreview');
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1000px', margin: '0 auto' }}>
      <style >{`
        input[type="checkbox"]:checked {
          accent-color: #3D86FF;
        }
        input[type="checkbox"] {
          accent-color: #3D86FF;
        }
        input[type="radio"]:checked {
          accent-color: #3D86FF;
        }
        input[type="radio"] {
          accent-color: #3D86FF;
        }
      `}</style>
      <h2 style={{ marginBottom: '20px' }}>生成接案笔记</h2>
      
      <div style={{ backgroundColor: '#fff', borderRadius: '8px', padding: '20px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
        <h3 style={{ marginBottom: '20px' }}>笔记内容确认</h3>
        <p style={{ marginBottom: '20px', color: '#666' }}>请选择要包含在接案笔记中的内容</p>

        {/* 时间 */}
        <div style={{ marginBottom: '15px' }}>
          <label style={{ display: 'flex', alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={checkedItems.time}
              onChange={() => handleCheckboxChange('time')}
              style={{ marginRight: '10px' }}
            />
            <span>时间:</span>
            <input
              type="text"
              value="2025年9月15日"
              readOnly
              style={{ marginLeft: '10px', padding: '5px', border: '1px solid #ddd', borderRadius: '4px' }}
            />
          </label>
        </div>

        {/* 地点 */}
        <div style={{ marginBottom: '15px' }}>
          <label style={{ display: 'flex', alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={checkedItems.location}
              onChange={() => handleCheckboxChange('location')}
              style={{ marginRight: '10px' }}
            />
            <span>地点:</span>
            <input
              type="text"
              placeholder="请输入地点"
              style={{ marginLeft: '10px', padding: '5px', border: 'none', borderBottom: '2px dashed #ddd', borderRadius: '0', flex: 1, outline: 'none' }}
            />
          </label>
        </div>

        {/* 接待律师 */}
        <div style={{ marginBottom: '15px' }}>
          <label style={{ display: 'flex', alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={checkedItems.receptionLawyer}
              onChange={() => handleCheckboxChange('receptionLawyer')}
              style={{ marginRight: '10px' }}
            />
            <span>接待律师:</span>
              <input
              type="text"
              placeholder="请输入接待律师"
              style={{ marginLeft: '10px', padding: '5px', border: 'none', borderBottom: '2px dashed #ddd', borderRadius: '0', flex: 1, outline: 'none' }}
            />
          </label>
          <div style={{ marginLeft: '30px', marginTop: '10px' }}>
            {!showInputFields['记录律师'] ? (
              <button
                onClick={() => handleAddClick('记录律师')}
                style={{ padding: '5px 10px', marginRight: '10px', border: '1px solid #3D86FF', color: '#3D86FF', background: 'white', borderRadius: '4px' }}
              >
                + 记录律师
              </button>
            ) : (
              <div style={{ display: 'flex', alignItems: 'center', marginRight: '10px' }}>
                <span style={{ marginRight: '10px' }}>记录律师:</span>
                <input
                  type="text"
                  placeholder="请输入记录律师"
                  value={inputValues['记录律师']}
                  onChange={(e) => handleInputChange('记录律师', e.target.value)}
                  style={{ padding: '5px', border: 'none', borderBottom: '2px dashed #ddd', borderRadius: '0', flex: 1, outline: 'none' }}
                />
              </div>
            )}
            {!showInputFields['记录人'] ? (
              <button
                onClick={() => handleAddClick('记录人')}
                style={{ padding: '5px 10px', border: '1px solid #3D86FF', color: '#3D86FF', background: 'white', borderRadius: '4px' }}
              >
                + 记录人
              </button>
            ) : (
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <span style={{ marginRight: '10px' }}>记录人:</span>
                <input
                  type="text"
                  placeholder="请输入记录人"
                  value={inputValues['记录人']}
                  onChange={(e) => handleInputChange('记录人', e.target.value)}
                  style={{ padding: '5px', border: 'none', borderBottom: '2px dashed #ddd', borderRadius: '0', flex: 1, outline: 'none' }}
                />
              </div>
            )}
          </div>
        </div>

        {/* 接待人 */}
        <div style={{ marginBottom: '15px' }}>
          <label style={{ display: 'flex', alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={checkedItems.receptionPerson}
              onChange={() => handleCheckboxChange('receptionPerson')}
              style={{ marginRight: '10px' }}
            />
            <span>接待人: 张三</span>
          </label>
          <div style={{ marginLeft: '30px', marginTop: '10px', display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
            {!showInputFields['性别'] ? (
              <button
                onClick={() => handleAddClick('性别')}
                style={{ padding: '5px 10px', border: '1px solid #3D86FF', color: '#3D86FF', background: 'white', borderRadius: '4px' }}
              >
                + 性别
              </button>
            ) : (
              <div style={{ display: 'flex', alignItems: 'center', marginRight: '10px' }}>
                <span style={{ marginRight: '10px' }}>性别:</span>
                <input
                  type="text"
                  placeholder="请输入性别"
                  value={inputValues['性别']}
                  onChange={(e) => handleInputChange('性别', e.target.value)}
                  style={{ padding: '5px', border: 'none', borderBottom: '2px dashed #ddd', borderRadius: '0', flex: 1, outline: 'none' }}
                />
              </div>
            )}
            {!showInputFields['民族'] ? (
              <button
                onClick={() => handleAddClick('民族')}
                style={{ padding: '5px 10px', border: '1px solid #3D86FF', color: '#3D86FF', background: 'white', borderRadius: '4px' }}
              >
                + 民族
              </button>
            ) : (
              <div style={{ display: 'flex', alignItems: 'center', marginRight: '10px' }}>
                <span style={{ marginRight: '10px' }}>民族:</span>
                <input
                  type="text"
                  placeholder="请输入民族"
                  value={inputValues['民族']}
                  onChange={(e) => handleInputChange('民族', e.target.value)}
                  style={{ padding: '5px', border: 'none', borderBottom: '2px dashed #ddd', borderRadius: '0', flex: 1, outline: 'none' }}
                />
              </div>
            )}
            {!showInputFields['出生日期'] ? (
              <button
                onClick={() => handleAddClick('出生日期')}
                style={{ padding: '5px 10px', border: '1px solid #3D86FF', color: '#3D86FF', background: 'white', borderRadius: '4px' }}
              >
                + 出生日期
              </button>
            ) : (
              <div style={{ display: 'flex', alignItems: 'center', marginRight: '10px' }}>
                <span style={{ marginRight: '10px' }}>出生日期:</span>
                <input
                  type="text"
                  placeholder="请输入出生日期"
                  value={inputValues['出生日期']}
                  onChange={(e) => handleInputChange('出生日期', e.target.value)}
                  style={{ padding: '5px', border: 'none', borderBottom: '2px dashed #ddd', borderRadius: '0', flex: 1, outline: 'none' }}
                />
              </div>
            )}
            {!showInputFields['身份证号-当事人'] ? (
              <button
                onClick={() => handleAddClick('身份证号', '当事人')}
                style={{ padding: '5px 10px', border: '1px solid #3D86FF', color: '#3D86FF', background: 'white', borderRadius: '4px' }}
              >
                + 身份证号
              </button>
            ) : (
              <div style={{ display: 'flex', alignItems: 'center', marginRight: '10px' }}>
                <span style={{ marginRight: '10px' }}>身份证号:</span>
                <input
                  type="text"
                  placeholder="请输入身份证号"
                  value={inputValues['身份证号-当事人']}
                  onChange={(e) => handleInputChange('身份证号', e.target.value, '当事人')}
                  style={{ padding: '5px', border: 'none', borderBottom: '2px dashed #ddd', borderRadius: '0', flex: 1, outline: 'none' }}
                />
              </div>
            )}
            {!showInputFields['手机号-当事人'] ? (
              <button
                onClick={() => handleAddClick('手机号', '当事人')}
                style={{ padding: '5px 10px', border: '1px solid #3D86FF', color: '#3D86FF', background: 'white', borderRadius: '4px' }}
              >
                + 手机号
              </button>
            ) : (
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <span style={{ marginRight: '10px' }}>手机号:</span>
                <input
                  type="text"
                  placeholder="请输入手机号"
                  value={inputValues['手机号-当事人']}
                  onChange={(e) => handleInputChange('手机号', e.target.value, '当事人')}
                  style={{ padding: '5px', border: 'none', borderBottom: '2px dashed #ddd', borderRadius: '0', flex: 1, outline: 'none' }}
                />
              </div>
            )}
          </div>
        </div>

        {/* 相对人姓名 */}
        <div style={{ marginBottom: '15px' }}>
          <label style={{ display: 'flex', alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={checkedItems.opponentName}
              onChange={() => handleCheckboxChange('opponentName')}
              style={{ marginRight: '10px' }}
            />
            <span>相对人姓名:</span>
            <input
              type="text"
              placeholder="请输入相对人姓名"
              style={{ marginLeft: '10px', padding: '5px', border: 'none', borderBottom: '2px dashed #ddd', borderRadius: '0', flex: 1, outline: 'none' }}
            />
          </label>
        </div>

        {/* 案由 */}
        <div style={{ marginBottom: '15px' }}>
          <label style={{ display: 'flex', alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={checkedItems.caseType}
              onChange={() => handleCheckboxChange('caseType')}
              style={{ marginRight: '10px' }}
            />
            <span>案由:</span>
          </label>
          <div style={{ marginLeft: '50px', marginTop: '10px' }}>
            <div style={{ display: 'flex', gap: '20px' }}>
              <label style={{ display: 'flex', alignItems: 'center' }}>
                <input
                  type="checkbox"
                  value="生命权纠纷"
                  checked={selectedCaseTypes.includes('生命权纠纷')}
                  onChange={() => handleCheckboxChange('生命权纠纷')}
                  style={{ marginRight: '8px' }}
                />
                <span>生命权纠纷</span>
              </label>
              <label style={{ display: 'flex', alignItems: 'center' }}>
                <input
                  type="checkbox"
                  value="肖像权纠纷"
                  checked={selectedCaseTypes.includes('肖像权纠纷')}
                  onChange={() => handleCheckboxChange('肖像权纠纷')}
                  style={{ marginRight: '8px' }}
                />
                <span>肖像权纠纷</span>
              </label>
              <label style={{ display: 'flex', alignItems: 'center' }}>
                <input
                  type="checkbox"
                  value="婚姻财产纠纷"
                  checked={selectedCaseTypes.includes('婚姻财产纠纷')}
                  onChange={() => handleCheckboxChange('婚姻财产纠纷')}
                  style={{ marginRight: '8px' }}
                />
                <span>婚姻财产纠纷</span>
              </label>
            </div>
          </div>
        </div>

        {/* 案件信息 */}
        <div style={{ marginBottom: '15px' }}>
          <label style={{ display: 'flex', alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={checkedItems.caseInfo}
              onChange={() => handleCheckboxChange('caseInfo')}
              style={{ marginRight: '10px' }}
            />
            <span>案件信息:</span>
            <input
              type="text"
              placeholder="案件事实、争议焦点、诉讼请求、证据情况等~"
              style={{ marginLeft: '10px', padding: '5px', border: 'none', borderBottom: '2px dashed #ddd', borderRadius: '0', flex: 1, outline: 'none' }}
            />
          </label>
        </div>

        {/* 其他补充的案件谈话记录 */}
        <div style={{ marginBottom: '15px' }}>
          <label style={{ display: 'flex', alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={checkedItems.otherNotes}
              onChange={() => handleCheckboxChange('otherNotes')}
              style={{ marginRight: '10px' }}
            />
            <span>其他补充的案件谈话记录</span>
          </label>
        </div>

        {/* 案件风险 */}
        <div style={{ marginBottom: '15px' }}>
          <label style={{ display: 'flex', alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={checkedItems.caseRisk}
              onChange={() => handleCheckboxChange('caseRisk')}
              style={{ marginRight: '10px' }}
            />
            <span>案件风险</span>
          </label>
        </div>

        {/* 落款年月日 */}
        <div style={{ marginBottom: '30px' }}>
          <label style={{ display: 'flex', alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={checkedItems.deadline}
              onChange={() => handleCheckboxChange('deadline')}
              style={{ marginRight: '10px' }}
            />
            <span>落款年月日: 2025年9月17日</span>
          </label>
        </div>

        {/* 按钮组 */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: '15px', marginTop: '30px', borderTop: '1px solid #e0e0e0', paddingTop: '20px' }}>
          <button
            onClick={handleCancel}
            style={{ padding: '10px 120px', border: '1px solid #d9d9d9', color: '#333', background: 'white', borderRadius: '4px' }}
          >
            取消
          </button>
          <button
            onClick={handleGenerateNote}
            style={{ padding: '10px 120px', border: 'none', color: 'white', background: '#3D86FF', borderRadius: '4px' }}
          >
            生成笔记
          </button>
        </div>
      </div>
    </div>
    );
};

// Props接口已移至组件上方

export default Note;
